<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymelef.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>变量表达式</h1>
    <h2>赋值：</h2>
    <h4 th:text="${msg}">Hello World!</h4>
    <h4 th:text="${user.usrName}">张三</h4>

    <h2>拼接：</h2>
    <h4 th:text="'欢迎您 '+${user.usrName} + ' ！'">张三</h4>
    <h4 th:text="|欢迎您 ${user.usrName} ！|">张三</h4>

    <h2>内联语法：</h2>
    <div th:inline="text">
        <p>Hello, [[${user.usrName}]] !</p>
        <p>usrRoleId: [[${user.usrRoleId}]]</p>
        <br/>
    </div>

    <h2>作用域取值：</h2>
    <h4 th:text="${#request.getAttribute('test')}">Request</h4>
    <h4 th:text="${test}">Request</h4>

    <!-- 操作 session 作用域 -->
    <h4 th:text="${session.test}">Session</h4>

    <h2>Utility 对象（工具类）</h2>
    <!--格式化时间-->
    <p th:text="${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}">2019-11-27 15:56:30</p>
    <!--创建当前时间 精确到天-->
    <p th:text="${#dates.format(#dates.createToday(), 'yyyy-MM-dd')}">2019-11-27</p>

    <h2>星号表达式</h2>
    <div th:object="${user}">
        ...
        <span th:text="*{usrName}">...</span>
        ...
        <span th:text="*{usrPassword}">...</span>
        ...
    </div>
    <h2>Switch选择表达式</h2>
    <div th:switch="${sex}">
        <p th:case="'woman'">她是一个姑娘...</p>
        <p th:case="'man'">这是一个爷们!</p>
        <!-- *: case 的默认的选项 -->
        <p th:case="*">未知性别的一个家伙。</p>
    </div>

    <h2>URL表达式</h2>
    <a th:href="@{test(id=${user.usrId})}" href="test.html">跳转到Test页面</a>

    <h2>循环控制</h2>
    <table>
        <tr style="background-color: #ccc;">
            <td>NO</td>
            <td>编号</td>
            <td>姓名</td>
            <td>密码</td>
            <td>状态1</td>
            <td>状态2</td>
        </tr>
        <tr th:each="user,stat : ${users}" th:style="${stat.even} ? 'background-color: #ccc;' : ''">
            <td th:text="${stat.count}">NO</td>
            <td th:text="${user.usrId}">编号</td>
            <td th:text="${user.usrName}">姓名</td>
            <td th:text="${user.usrPassword}">密码</td>
            <td th:text="${user.usrFlag==1} ? '激活' : '未激活'">状态</td>
            <td th:if="${user.usrFlag==1}">激活</td>
            <td th:unless="${user.usrFlag==1}">未激活</td>
        </tr>
    </table>

    <script th:inline="javascript">
        var msg = 'Hello ' + [[${user.usrName}]] + '！';
        console.log(msg);
    </script>
</body>
</html>